<template>
	<view class="item">
		<view v-if="item.isPredict && item.openStatus2 && pageType == 1 && introType != 2"
			class="row font24 m-t-24 c-red jjys">
			<view class="width-left">距离开售仅剩 {{ item.timer }}</view>
		</view>
		<view class="product">
			<view class="product-pic">
				<image @click="detail(item)" :src="item.thumPic" mode="scaleToFill"></image>
			</view>
			<!-- 有效类型 -->
			<view class="product-msg column-between-nocenter" v-if="introType == 1 || introType == 3">
				<view>
					<view @click="detail(item)" class="product-msg-title font28 ">
						<view v-if="sale && item.openStatus3" class="ys m-r-10">{{ item.openStatus3 }}</view>
						<view class="xrzx" v-if="item.oneBuyPromotionVO && item.oneBuyPromotionVO.id">新人专享</view>
						<view class="product-msg-title-text line-height-base">
							<view class="h-one">{{ item.name }}</view>
						</view>
					</view>
					<block v-if="item.skuProperties">
						<view @click="standards(item)" v-if="introType == 1"
							class="product-intro font24 c-999 m-t-12 h-one p-r-50">
							<text v-if="item.skuProperties" class="m-r-10"
								v-for="(j, k) in JSON.parse(item.skuProperties)">{{ j.value }}<text class="m-l-10 m-r-10"
									v-if="(JSON.parse(item.skuProperties).length - 1) != k"> ; </text></text>
							<image class="corner" src="" mode=""></image>
						</view>
						<view v-if="introType == 3" class="product-intro font24 c-999 m-t-12 h-one p-r-10">
							<text v-if="item.skuProperties" class="m-r-10"
								v-for="(j, k) in JSON.parse(item.skuProperties)">{{ j.value }}<text class="m-l-10 m-r-10"
									v-if="(JSON.parse(item.skuProperties).length - 1) != k"> ; </text></text>
						</view>
					</block>
					<view v-else class="product-intro font24 c-999 m-t-12 h-one p-r-10">
						<text class="m-r-10">默认规格</text>
					</view>
				</view>
				<view>
					<view class="product-price">
						<view class="price c-price-color h-one">
							<text>{{ dealScorePrice(item) }}</text>
						</view>
						<view v-if="modifiableCount" class="product-num font24"
							:style="{ 'opacity': item.oneBuyPromotionVO ? 0.5 : 1 }">
							<view @click="amount(1)">-</view>
							<!-- <input maxlength="99" @input="amount" @blur="amount"  pattern="[0-9]*" type="text" v-model="item.amount" /> -->
							<view @click="amount(3)">{{ item.amount }}</view>
							<view @click="amount(2)">+</view>
						</view>
						<view v-else class="product-count">x {{ item.amount }}</view>
					</view>
				</view>
				<view v-if="item.saleChannel == 0 && item.discountMoney && pageType == 1" class="discount"><span>优惠价 ¥
						{{ Number(item.discountPrice) }}</span></view>
			</view>
			<!-- 无效类型 -->
			<view class="product-msg column-between-nocenter" v-if="introType == 2">
				<view class="product-msg-title">
					<view class="font28 h-one c-999"><text>{{ item.name }}</text></view>
					<block v-if="item.stocks == 0 && item.prepareStocks == 0">
						<view v-if="item.skuProperties" class="product-intro font24 c-999 m-t-12 h-one p-r-10">
							<text class="m-r-10" v-for="(j, k) in JSON.parse(item.skuProperties)">{{ j.value }}<text
									class="m-l-10 m-r-10" v-if="(JSON.parse(item.skuProperties).length - 1) != k"> ;
								</text></text>
						</view>
					</block>
				</view>
				<view
					v-if="item.status == 2 || item.isError1 || item.isError2 || (item.stocks == 0 && item.prepareStocks == 0) || item.delFlag == 1 || (item.skuStatus == 0 || item.skuDelFlag == 1) || item.oneBuyPromotionVO"
					class="product-msg-explain m-t-30">{{ item.invalidIntro }}</view>
				<view v-else class="product-msg-explain m-t-30">{{ item.isPredict }}</view>
			</view>
		</view>

		<!-- 底部信息 -->
		<view class="product-type" v-if="introType != 2">
			<view v-show="showDeliveryDate && item.saleChannel != 4" class="row-between font24 m-t-28 c-text-color-yellow"
				style="align-items: flex-start;">
				<view class="width-left">发货时间</view>
				<view class="width-right">{{deliveryDate(item) }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { getPresalesDelivery } from "@/pages/shopping/cart/util/cart.js";
import { useCartLogic } from "@/pages/shopping/cart/composition/useCartLogic.js";
const {
	GET_ORDER_LIST,
	getOrderList
} = useCartLogic();

const props = defineProps({
	item: {
		type: Object,
		default: () => { }
	},
	introType: {
		type: Number,
		default: 1
	},
	i: {
		type: Number,
		default: 0
	},
	j: {
		type: Number,
		default: 0
	},
	sale: {
		type: Boolean,
		default: true
	},
	pageType: {
		type: Number,
		default: 1
	},
	isReplace: {
		type: Boolean,
		default: false
	},
	subUserId: {
		type: Number,
		default: null
	},
	brandId: {
		type: [String, Number],
		default: ''
	},
	// 是否能够修改数量
	modifiableCount: {
		type: Boolean,
		default: true
	},
	// 展示发货时间
	showDeliveryDate: {
		type: Boolean,
		default: false
	},
});

const emit = defineEmits(['amount', 'openLetter', 'toDetail', 'toStandards']);

const dealScorePrice = (item) => {
	const price = Number(item.price)
	return '￥' + Number(price.toFixed(2))
}

const deliveryDate = (goodInfo) => {
	const presalesDelivery = getPresalesDelivery(goodInfo)
	if (presalesDelivery) {
		return presalesDelivery
	} else if (goodInfo.expressMsg) {
		return goodInfo.expressMsg
	} else if (goodInfo.spotCustDeliveryMsg || goodInfo.spotDeliveryMsg) {
		return goodInfo.spotDeliveryTimeType == 0 ?
			(Number(goodInfo.spotDeliveryMsg.split(',')[0].split(':')[0]).toString() + '点前下单当天发货，' + Number(
				goodInfo
					.spotDeliveryMsg.split(',')[0].split(':')[0]).toString() + '点后下单则次日发货' + (goodInfo
						.spotDeliveryMsg.split(',')[1] == 1 ? ',节假日顺延' : '')) :
			goodInfo.spotCustDeliveryMsg
	}
}

// 加减商品数量
const amount = (type) => {
	if (props.item.oneBuyPromotionVO) {
		return
	}
	if (props.isReplace) {
		emit('amount', props.item, type, {
			subUserId: props.subUserId,
			brandId: props.brandId
		})
	} else {
		emit('amount', props.item, type)
	}
}

const detail = (item) => {
	emit('toDetail', item)
}

const standards = (item) => {
	emit('toStandards', item)
}
</script>

<style lang="scss" scoped>
@import "@/pages/shopping/cart/common.scss";
.jjys {
	background-color: #FFECED;
	border-radius: 50rpx;
	display: inline-block;
	padding: 4rpx 10rpx;
	margin-bottom: 20rpx;
}

.xrzx {
	background: #FFFFFF;
	padding: 0 4px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	border-radius: 3px;
	border: 1px solid #C08E0B;
	font-size: 12px;
	color: #C08E0B;
	margin-right: 5px;
}

.item {
	word-break: break-all;

	.goods_express_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 12rpx;
		background-color: rgba(74, 199, 87, 0.05);
		padding: 24rpx 16rpx;
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 32rpx;
	}

	.goods_express_text {
		display: flex;
		align-items: center;

		.goods_express_icon {
			height: 26rpx;
			border: 1px solid #33c2b4;
			margin-right: 12rpx;
		}
	}

	.goods_operation_button {
		height: 40rpx;
		border-radius: 20rpx;
		border: 1px solid #5ECC26;
		padding: 0rpx 7rpx 0 14rpx;
		font-size: 24rpx;
		font-weight: normal;
		color: #5ECC26;
		display: flex;
		align-items: center;
		line-height: 1;

		.goods_operation_icon {
			// position: relative;
			// top: 1rpx;
		}
	}


	.product {
		// position: relative;
		width: 100%;
		height: 160rpx;
		// max-height: 300rpx;
		display: flex;
		justify-content: space-between;
		// align-items: center;

		.product-pic {
			width: 160rpx;
			height: 160rpx;
			border-radius: 12rpx;
			overflow: hidden;
			position: relative;
			// position: absolute;
			// left: 0;
			// top: 0;

			image {
				width: 160rpx;
				height: 160rpx;
			}

			.product_tag {
				height: 32rpx;
				position: absolute;
				left: 8rpx;
				top: 8rpx;
				font-size: 24rpx;
				color: #C08E0B;
				background-color: #FFFFFF;
				border-radius: 4rpx;
				line-height: 32rpx;
				text-align: center;
			}
		}

		.product-msg {
			// padding-left: 184rpx;
			box-sizing: border-box;
			width: calc(100% - 184rpx);
			height: 100%;

			// min-height: 160rpx;
			.product-msg-title {
				line-height: 1;
				color: #1b2120;
				// padding-top: 10rpx;
				max-height: 74rpx;
				display: flex;
				align-items: flex-start;

				.product-msg-title-text {
					flex: 1;
					min-height: 0;
					padding-top: 4rpx;
					font-size: 32rpx;
				}
			}

			.discount {
				margin-top: 10rpx;

				>span {
					background-color: #FFEBEB;
					color: #FD5454;
					font-size: 24rpx;
					padding: 5rpx 10rpx;
					border-radius: 5rpx;
				}

			}

			.product-intro {
				display: inline-block;
				// background-color: #F8F8F8;
				// border-radius: 6rpx;
				// height: 36rpx;
				// line-height: 36rpx;
				position: relative;
				max-width: 70%;

				>image {
					transform: rotate(90deg);
					position: absolute;
					top: 2rpx;
					right: 10rpx;
				}
			}

			.product-price {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.price {
					font-weight: bold;
				}

				.product-num {
					border: 1px solid #F6F6F6;
					border-radius: 6rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					text-align: center;
					line-height: 40rpx;
					margin-left: 15rpx;

					>view {
						width: 40rpx;
						height: 40rpx;
					}

					>view:nth-of-type(2) {
						width: 64rpx;
						height: 40rpx;
						border-left: 1px solid #F6F6F6;
						border-right: 1px solid #F6F6F6;
						font-size: 24rpx;
					}
				}

				.product-count {
					font-size: 28rpx;
					color: #7c807f;
				}
			}
		}
	}

	.product-type {
		.width {
			width: 50%;
		}

		.width-left {
			width: 160rpx;
			margin-right: 24rpx;
			text-align: left;
		}

		.width-right {
			width: calc(100% - 184rpx);
		}
	}
}

.ys {
	background: #FFFFFF;
	padding: 4rpx;
	text-align: center;
	border-radius: 6rpx;
	border: 0.5px solid #C08E0B;
	font-size: 24rpx !important;
	color: #C08E0B;
	box-sizing: border-box;
}

.corner {
	width: 35rpx;
	height: 35rpx;
	flex-shrink: 0;
}

// 多倍积分
.integralActivity {
	margin: 0;
	padding: 0;
	width: 100%;
	margin-top: 40rpx;
	border-radius: 8rpx;
	border: 1px solid #ba6363;
	font-size: 24rpx;
	line-height: 1;
	color: #ba6363;
	overflow: hidden;
	box-sizing: border-box;

	.multipleIntegral {
		width: 160rpx;
		height: auto;
		padding: 16rpx 0;
		text-align: center;
		box-sizing: border-box;
		line-height: 1;
		border: none;
		color: #ba6363;
	}

	.integralActivity_time {
		flex: 1;
		color: #FFFFFF;
		line-height: 1;
		padding: 16rpx 0 16rpx 24rpx;
		background-color: rgba(216, 26, 0, 0.05);
		color: #ba6363;
		border-left: 1px solid #ba6363
	}
}

.integralActivity_no {
	// background-color: #FE9898;
}
</style>
